<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景属性</title>
		<style>
			div{
				width: 500px;
				height: 500px;
				background-color: #ffff7f;
				/* 背景图属性 */
				background-image: url(../Day03/img/蜡笔小新.png);
			    /* 背景图大于空间--背景图尺寸属性：属性值 ① px % 
				                                       ②contain  等比例缩放图片
													   ③cover    等比例放大图片
				*/
				background-size: 30% 30%;
				/* 背景图小于空间--平铺 */
				background-repeat: no-repeat;
				/* 背景图小于空间-->背景定位属性,属性值 x% y%  数值px 数值px 英文*/
				background-position: 20% 0;
				background-position: 100px 0;
				background-position: center center;
			    
			}
			/* 背景图固定属性：fixed固定模式-->理解：水印 
			先决条件：1.高度空间足够形成滚动条
			         2.引入背景图滚动模式：①等比例放大图片，覆盖整个容器
					                     ②等比例缩放图片，保证图片全部显示在容器中
					3.背景图固定属性：background-attachment:fixed  固定到页面上
			*/
			body{
				/* 高度：100000px  形成滚动条 */
				height: 100000px;
				/* 滚动模式-->背景图如何滚动 --属性background-size*/
				background-size: contain;
				/* 引入图 */
				background-image: url(../Day03/img/蜡笔小新.png);
				background-repeat: no-repeat;
				/* 水印效果：背景图固定 */
				background-attachment: fixed;
			}
		</style>
	</head>
	<body>
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus voluptatibus, similique aperiam et accusamus ut dolorem nesciunt doloribus nemo, odio exercitationem voluptate. Minus suscipit, fugit velit enim inventore esse reprehenderit. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus quibusdam sed eaque, odit praesentium, asperiores saepe rerum optio veritatis obcaecati non sequi maiores aliquam expedita est quia sit hic numquam.
		<div></div>
	</body>
</html>